<template>
  <div class="good-item">
    <el-row>
      <el-col
        :span="6"
        v-for="(g, index) in good"
        :key="g.id"
        :offset="index % 3 ? 2 : 0"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          style="width:280px;"
        >
          <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
          >
          <div style="padding: 10px;">
            <span v-html="`<strong>${g.goodsName}</strong>`"></span>
            <span style="float:right"><span class="currency-sign">&yen;</span>{{g.price}}</span>
            <div class="bottom clearfix">
              <template>
                <el-input-number
                  v-model="g.amount"
                  @change="handleChange"
                  :min="0"
                  :max="10"
                  label="商品数量"
                  size="small"
                ></el-input-number>
              </template>
              <el-button
                style="float:right;padding:0"
                @click="submit(g.id)"
                class="custom-button"
              >购买</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="50"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="`订单号: ${order.id}`"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="order"
        inline="true"
      >
        <el-form-item
          label="货物ID:"
          :label-width="formLabelWidth"
        >
          <span>{{order.goodsId}}</span>
        </el-form-item>
        <el-form-item
          label="货物名:"
          :label-width="formLabelWidth"
        >
          <span>{{order.goodsName}}</span>
        </el-form-item>
        <el-form-item
          label="价格:"
          :label-width="formLabelWidth"
        >
          <span>&yen;{{order.price}}</span>
        </el-form-item>
        <el-form-item
          label="订单数量:"
          :label-width="formLabelWidth"
        >
          <span>{{order.amount}}</span>
        </el-form-item>

        <el-form-item
          label="生产商实际地址"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="order.realAddress"
            autocomplete="off"
            style="width:120%;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="生产商区块地址"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="order.address"
            autocomplete="off"
            style="width:120%;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="生产商姓名"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="order.producerName"
            autocomplete="off"
            style="width:120%;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="中间商区块地址"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="order.middleManAddress"
            autocomplete="off"
            style="width:120%;"
          ></el-input>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const stringRandom = require("string-random");
export default {
  name: "Purchase",
  data() {
    return {
      good: [
        {
          id: "1",
          goodsName: "汉堡",
          amount: 0,
          price: 100,
        },
        {
          id: "2",
          goodsName: "炸鸡",
          amount: 0,
          price: 100,
        },
        {
          id: "3",
          goodsName: "水果",
          amount: 0,
          price: 100,
        },
        {
          id: "4",
          goodsName: "蔬菜",
          amount: 0,
          price: 100,
        },
        {
          id: "5",
          goodsName: "鲜牛奶",
          amount: 0,
          price: 100,
        },
        {
          id: "6",
          goodsName: "汉堡",
          amount: 0,
          price: 100,
        },
        {
          id: "7",
          goodsName: "汉堡",
          amount: 0,
          price: 100,
        },
        {
          id: "8",
          goodsName: "汉堡",
          amount: 0,
          price: 100,
        },
        {
          id: "9",
          goodsName: "汉堡",
          amount: 0,
          price: 100,
        },
      ],

      dialogTableVisible: false,
      dialogFormVisible: false,
      order: {
        id: "",
        goodsId: "",
        goodsName: "",
        price: "",
        amount: 0,
        realAddress: "", // 生产商物理地址
        address: "", // 生产商地址
        producerName: "", // 生产商姓名
        middleManAddress: "", // 中间商地址
      },
      formLabelWidth: "200px",
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    submit(id) {
      this.dialogFormVisible = true;
      this.order.id = stringRandom(16, { letters: false });
      // console.log(this.order.id);
      // console.log(id);
      this.good.some((o) => {
        if (o.id == id) {
          this.order.goodsId = o.id;
          this.order.goodsName = o.goodsName;
          this.order.price = o.price * o.amount;
          this.order.amount = o.amount;
        }
      });
    },
  },
};
</script>

<style>
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
  width: 50px;
  height: 30px;
  border: 1px solid #409eff;
}
.custom-button {
  width: 50px;
  height: 30px;
  border: 1px solid #409eff;
  line-height: 8px;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-card {
  margin-top: 20px;
}

.currency-sign {
  font-size: 6px !important;
  color: red;
}


</style>